<template>
	<view class="promotional-activities d-flex flex-r ali-i-c just-c ">
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view slot="center"><text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">邀请好友</text></view>
		</u-navbar>
		<!-- 邀请好友 -->
		<view >
			<hch-poster ref="hchPoster"  @cancel="handleCancel" :posterData.sync="posterData" @previewImage='previewImage' />
		</view>
		<button
			open-type="share"
			class=" d-flex flex-c ali-i-c just-c"
			style="width: 308rpx;min-height: 148rpx;background-color:  rgba(9,187,7,0.3);border: none;outline: none;border-radius: 10rpx; position: relative;"
		>
			<image
				:src="require('../static/wx.png')"
				style="width: 74rpx;height: 60rpx;position: absolute;top: 22rpx;left: 126rpx;"
			></image>
			<text style="position: absolute;bottom:-2rpx;left: 92rpx;">分享好友</text>
		</button>
	</view>
</template>

<script>
	import { mycode } from '@/common/api.js';
	import uNavbar from '../components/uview-ui/components/u-navbar/u-navbar';
	import HchPoster from "../components/hch-poster/hch-poster.vue"
	import {
		_containerHeight,
		_addUnit,
		_rpxTpx
	} from '@/utils/GetSys.js';
	export default {
		components: {
			'u-navbar': uNavbar,
			HchPoster
		},
		data() {
			return {
				userid:uni.getStorageSync('userCent').id,
				containerHeight: '',
				posterData: {
					poster: {
						//根据屏幕大小自动生成海报背景大小
						url: 'https://www.chejingjing.cn/uploads/imgs/20220907/eb12ef7c83b439e1bca45e1fd41d0bb6.png', //图片地址
						r: 10, //圆角半径
						w: 326, //海报宽度
						h: 460, //海报高度
						p: 20 //海报内边距padding
					},
					mainImg: {
						//海报主商品图
						url: "", //图片地址
						r: 0, //圆角半径
						w: 0, //宽度
						h: 0 //高度
					},
					title: {
						//商品标题
						text: "", //文本
						fontSize: 16, //字体大小
						color: "#000", //颜色
						lineHeight: 25, //行高
						mt: 20 //margin-top
					},
					codeImg: {
						//小程序码
						url: "", //图片地址
						w: 150, //宽度
						h: 150, //高度
						mt: uni.getSystemInfoSync().osName == 'ios' ? 400 : 360, //margin-top
						r: 0 //圆角半径
					},
					tips: [
						//提示信息
						{
							text: "", //文本
							fontSize: 14, //字体大小
							color: "#2f1709", //字体颜色
							align: "center", //对齐方式
							lineHeight: 25, //行高
							mt: 20 //margin-top
						},
						{
							text: "", //文本
							fontSize: 12, //字体大小
							color: "#2f1709", //字体颜色
							align: "center", //对齐方式
							lineHeight: 25, //行高
							mt: 20 //margin-top
						}
					]
				}
			};
		},
		onShareAppMessage(event) {
			return {
				title: '车净净'+this.userid,
				path: '/pages/index/index?scene='+this.userid,
				imageUrl:
					'https://www.chejingjing.cn/uploads/imgs/20220907/991dfe4b7cd1d7b13f8063f5a3bc9fb1.png'
			};
		},
		methods: {
      mycodeimg(){
				let params={
					token:uni.getStorageSync('usertoken')
				}
				mycode(params).then((res)=>{
					this.posterData.codeImg.url=res.data.data;
					
					setTimeout(()=>{
						this.$refs.hchPoster.posterShow()
					},1000)
				}) 
			}
		},    
		onLoad(Source) {
			this.containerHeight = _containerHeight();
			this.mycodeimg()

		}
	}
</script>

<style lang="scss">
	.invitation {
		box-sizing: border-box;
		background-color: #51A2FF;

		.my-extend-container {
			box-sizing: border-box;
		}

		.custom-cover-box {

			width: 750rpx;
			z-index: 99999999999;
			background-color: rgba(255, 255, 255, 0);

			.custom-cover-btn {
				height: 80rpx;
				width: 600rpx;
				background-color: #fff;
				text-align: center;
				font: 500 32rpx PingFang SC;
				color: #333333;
				margin: 0 auto;
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(7, 0, 2, 0.2);
				border-radius: 16rpx;
				line-height: 2.1;
			}
		}

		.custom-cover-nav {
			width: 750rpx;
			background-color: rgba(255, 255, 255, 0); //#51A2FF

			.custom-cover-right,
			.custom-cover-left {
				display: inline-block;
				text-align: center;
				height: 88rpx;
				box-sizing: border-box;
			}

			.custom-cover-left {
				width: 60rpx;
				line-height: 5.8;

				.custom-cover-back {
					width: 30rpx;
					height: 30rpx;
					margin-left: 30rpx;
				}
			}

			.custom-cover-right {
				width: 690rpx;
				line-height: 2.4;
			}
		}
	}
</style>
